<template>
	<uni-popup type="bottom" ref="historyDetail">
		<view class="history-detail">
			<div class="header">
				<img @click="close" src="../static/close.svg" class="close-icon" alt="" srcset="">
				<text class="header-title">场次详情</text>
			</div>
			<div class="popup-container">
				<div class="member-item " v-for="item in detail " :key="item.userId">
					<div class="avatar-box">
						<img :src="item.avatar" class="avatar-wrapper" alt="" srcset="">
						<text class="user-name">{{item.nickname}}</text>
					</div>

					<text class="member-item-score">{{item.score}}分</text>
					<div class="transfer-btn" @click="transfer(item)" v-if="item.userId !== userId &&item.status===1">
						<text>转账</text>
					</div>
					<div v-else class="transfer-placeholder"></div>
				</div>

			</div>
		</view>
	</uni-popup>
</template>

<script>
	export default {
		name: "HistoryDetailPopup",
		data() {
			return {

			};
		},
		props: {
			detail: Array
		},
		methods: {
			open() {
				this.$refs.historyDetail.open()
			},
			close() {
				this.$refs.historyDetail.close()
			}
		}
	}
</script>

<style scoped lang="scss">
	.history-detail::after {
		display: table;
		content: "";
		clear: both;
	}

	.history-detail {
		background-color: white;
		border-top-left-radius: 30upx;
		border-top-right-radius: 30upx;
		padding-top: 24upx;

		.header {
			height: 80upx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;


			.header-title {
				font-size: 30upx;
				font-weight: bolder;
			}

			.close-icon {
				width: 40upx;
				height: 40upx;
				position: absolute;
				left: 24upx;
				top: 20upx;
			}

		}

		.popup-container {
			width: 100%;
			max-height: 600upx;
			overflow-y: auto;
			margin-bottom: 20upx;
			padding-top: 20upx;
			background-color: #f2f7ff;

			.member-item {
				align-items: center;
				background-color: #fff;
				border-radius: 16upx;
				box-shadow: 0 8upx 32upx #00000008;
				display: -webkit-flex;
				display: flex;
				justify-content: space-between;
				margin-bottom: 24upx;
				overflow: hidden;
				padding: 16upx 24upx;
				position: relative;
				margin-left: 40upx;
				margin-right: 40upx;

				.avatar-box {
					display: flex;
					align-items: center;
				}

				.avatar-wrapper {
					background-color: #ecf0f2;
					border-radius: 100%;
					box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .4);
					height: 90upx;
					margin-right: 16upx;
					position: relative;
					width: 90upx;
				}

				.user-name {
					font-size: 28upx;
					font-weight: 600;
					width: 200upx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap
				}

				.member-item-score {
					font-family: D-DIN;
					font-size: 32upx;
					font-weight: 700;
					padding-right: 64upx;
					text-align: right;
					width: 180upx;
				}

				.transfer-placeholder {
					height: 56upx;
					width: 100upx;
				}

				.transfer-btn {
					background-color: $uni-color-second;
					border-radius: 8upx;
					box-shadow: 0 4upx 8upx 0 rgba(0, 0, 0, .2);
					color: $uni-color-primary;
					font-size: 24upx;
					font-weight: 600;
					height: 56upx;
					text-align: center;
					width: 100upx;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.transfer-btn::hover {
					background-color: #d7ecff;
				}
			}

		}
	}
</style>